<template>
  <div class="news">
    <!-- 头部组件 -->
    <Navbar title="新闻列表"/>

    <ul>
      <li v-for="(news, index) in newsList" :key="index">
        <router-link :to="{name:'news.detail', query:{id:news.id}}">
          <div class="new_img">
            <img :src="news.img_url" alt />
          </div>
          <div class="content">
            <p class="title" :title="news.title">{{news.title}}</p>
            <div class="news-desc">
              <p class="summary">{{news.zhaiyao}}</p>
              <p>
                <span class="praise">点赞数: {{news.click}}</span>
                <br />
                <span class="time">发表时间:{{news.add_time | converTime('YYYY-MM-DD')}}</span>
              </p>
            </div>
          </div>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "news.list",

  data() {
    return {
      newsList: []
    };
  },
  created() {
    this.$axios
      .get("getnewslist")
      .then(res => {
        this.newsList = res.data;
        console.log(this.newsList);
      })
      .catch(err => {
        console.log("新闻列表异常", err);
      });
  }
};
</script>

/* // 这里的 scoped 表示只在当前组件起作用 （局部） */
<style lang="css" scoped>
.news {
  width: 100%;
  height: 100%;
  position: relative;
}
.news ul li a {
  display: flex;
  width: 100%;
  justify-content: space-around;
}
.news ul li .new_img {
  width: 30%;
}
.news ul li .new_img img {
  width: 100%;
}
.content {
  width: 64%;
  /* text-align: left; */
  font-size: 14px;
}
.content > p {
  height: 30px;
  line-height: 30px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.news-desc p {
  font-size: 12px;
  color: #666;
}
.news-desc p:last-child {
  color: brown;
}
</style>